<template>
  <div>
    <el-card style="margin:0 20px;height:90vh">
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
          >
            <el-menu-item v-for="item in roleList" :key="item.roleId" style="padding:0;display:flex;justify-content: space-between;color:black">
              <div>
                <i class="el-icon-user" />
                <span slot="title">{{ item.roleName }}</span>
              </div>
              <el-dropdown>
                <span class="el-dropdown-link" style="color:black">
                  <i id="icon" class="el-icon-more" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>编辑角色</el-dropdown-item>
                  <el-dropdown-item style="color:red">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>
          </el-menu>
          <el-button style="width:100%" @click="$router.push(`/addA`)">添加角色</el-button>
        </el-aside>
        <el-container>
          <el-header>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane class="tabPane" label="功能权限" name="first">
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                  style="width:20%;border-right:1px solid #e6e6e6;height:500px"
                />
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                  style="width:20%;border-right:1px solid #e6e6e6;height:500px"
                />
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                  style="width:20%;border-right:1px solid #e6e6e6;height:500px"
                />
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                  style="width:20%;border-right:1px solid #e6e6e6;height:500px"
                />
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                  style="width:20%;border-right:1px solid #e6e6e6;height:500px"
                />
              </el-tab-pane>
              <el-tab-pane label="成员(1)" name="second">成员 </el-tab-pane>
            </el-tabs>
          </el-header>
        </el-container>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import { getSystemRoleList } from '@/api/systeManagement/role'
export default {
  name: 'Permission',
  data() {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      roleList: [],
      activeName: 'first'
    }
  },
  async created() {
    const result = await getSystemRoleList()
    console.log(result)
    this.roleList = result.data
    console.log(this.roleList)
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style>
  .el-header, .el-footer {
    line-height: 60px;
  }

  .el-aside {
    height: 90vh;
    text-align: center;
    border-right: 1px solid #e6e6e6;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;

  }
  #icon{
    transform: rotate(90deg);
  }
  .tabPane{
    display:flex;
    height:100%
  }
</style>
